<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-09 08:50:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-09 10:56:57
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <div class="header">网页头部</div>
    <!-- asdf  -->
    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <ul>

    </ul>
    <div class="footer">网页底部</div>

    <script src="./jd.js"></script>
    <script>
        // 左右分页 



        // 获取元素 

        // ul 
        var contentEle = document.querySelector('ul');

        // 上一页按钮
        var prevBtn = document.querySelector('.prev');
        // 下一页
        var nextBtn = document.querySelector('.next');
        // 下拉框 
        var selectEle = document.querySelector('select');
        // 显示屏
        var totalEle = document.querySelector('.total');

        //设置变量

        // 当前页
        var current = 1;
        // 每页显示条数  
        var pagesize = 8;
        // 总页数  
        var total = 0;


        // 1  0~3     4
        // 2  4~7     4 
        // 3  8~11     4 

        function bindHtml() {
            // (当前页面-1)*每页显示的条数   当前页面*每页显示的条数-1 
            var bindList = arrs.slice((current - 1) * pagesize, current * pagesize);
            // [{},{}]
            contentEle.innerHTML = bindList.reduce(function (prev,item) {
                return prev += `
                <li>
                   <a href="${item.detail_url}"><img src="${item.pic_url}" alt=""></a>
                   <p>${item.title}</p>
                   <p>价格:${item.price}</p>
                   <p>销量:${item.sales}</p>
                   <p>更新:${item.data_update}</p>     
                </li>
            `
            },'');
            total = Math.ceil(arrs.length / pagesize);
            totalEle.innerText = `${current} / ${total}`;

            prevBtn.className = current === 1 ? 'prev disable':'prev';
            nextBtn.className = current === total ? 'next disable':'next';
            
            // 根据程序员默认设置的pagesize 让下拉菜单默认选中谁
            selectEle.value = pagesize;

        }

        bindHtml();


        // 用户点击上一页 
        prevBtn.onclick = function(){
            if(current === 1) return
            current--;
            bindHtml();
        }
        // 用户点击下一页 
        nextBtn.onclick = function(){
            if(current === total) return
            current++;
            bindHtml()
        }

        // 用户点击下啦列表

        selectEle.onchange = function(){
            // 用户到底选了谁  
            pagesize = selectEle.value - 0;
            current = 1;
            bindHtml()
        }
    </script>
</body>

</html>